<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/iconfont.css" rel="stylesheet" />
    	<link href="../css/changpinxiangqing.css" rel="stylesheet" />
    	<script src="../js/jquery-1.9.1.min.js"></script>
	</head>

	<body>
		<!--  顶部组件      -->
		<header class="mui-bar mui-bar-nav head">
			<a class="mui-action-back">
				<span class="mui-icon mui-icon-arrowleft sp5"></span>
			</a>
		    <h1 class="mui-title">产品详情</h1>
		    <span class="gouwuche">
		    	<i class="iconfont icon-gouwuche"></i>
		    </span>
		</header>
		<!--  底部导航栏     -->
		<nav id="nav" class="mui-bar mui-bar-tab">
			<a href="dingdanxiangqing.html">
				<button type="button" class="mui-btn mui-btn-danger">立即购买</button>
			</a>
		    <a href="####">
		    	<button id="join_gouwuche" type="button" class="mui-btn mui-btn-danger mui-btn-outlined">加入购物车</button>
		    </a>
		</nav>
		<!--  主题内容组件     -->
		<div id="contents" style="padding-bottom: 70px;" class="mui-content">
			<div id="slider" class="mui-slider" >
			  <div id="slider_xia" class="mui-slider-group mui-slider-loop">
			    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->  
			  </div>
			  <div class="mui-slider-indicator">
			    <div class="mui-indicator mui-active"></div>
			    <div class="mui-indicator"></div>
			    <div class="mui-indicator"></div>
			  </div>
			</div>
			<div id="boxs" class="mui-input-row mui-checkbox mui-left"></div>
			<div id="shuliang" style="width: 100%; height: 55px;" class="label_one_contain_bottom">
				<span style="margin-left: 19px;" class="jiaqian" id="num"></span>
				<div style="margin: 16px 14px 0 0;" class="mui-numbox" data-numbox-step='1' data-numbox-min='0' data-numbox-max='10000'>
					<!-- "-"按钮，点击可减小当前数值 -->
					<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
					<input style="height: 24px;" class="mui-numbox-input" type="number" />
					<!-- "+"按钮，点击可增大当前数值 -->
					<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
				</div>
			</div>
			<div class="mui-segmented-control">
			    <a class="mui-control-item mui-active" href="#item1">商品详情</a>
			    <a class="mui-control-item" href="#item2">规格参数</a>
			    <a class="mui-control-item" href="#item3">适用车型</a>
			    <a class="mui-control-item" href="#item4">售后服务</a>
			</div>
			<div class="mui-content-padded">
				<!-- 热门车系      -->
				<div id="item1" class="mui-control-content mui-active">
					<img src="../img/wode/IP1.jpg" />
				</div>
				<div id="item2" class="mui-control-content">
					
				</div>
				<div id="item3" class="mui-control-content">
					
				</div>
				<div id="item4" class="mui-control-content">
					
				</div>
			</div>
			<div class="bottom_content">
				<span class="mui-icon iconfont icon-xiaoxi"></span>
				<a>用户评论</a>
			</div>
			<div class="bottom_pinglun">
				<div class="bottom_pinglun_left">
					<div class="yhtx">
						<img src="../img/wode/touxiang.jpg" />
					</div>
				</div>
				<div class="bottom_pinglun_right">
					<a>注册用户奇</a><br />
					<span>2016-12-02 01:10:59</span>
					<p>产品很不错，下次再来</p>
				</div>
			</div>
			<div class="bottom_pinglun">
				<div class="bottom_pinglun_left">
					<div class="yhtx">
						<img src="../img/wode/touxiang.jpg" />
					</div>
				</div>
				<div class="bottom_pinglun_right">
					<a>注册用户奇</a><br />
					<span>2016-12-02 01:10:59</span>
					<p>产品很不错，下次再来</p>
				</div>
			</div>
		</div>
		<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/go.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function(){
			    var gallery = mui('.mui-slider');
					gallery.slider({
				 		interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
				});
				document.getElementById("join_gouwuche").addEventListener('tap',function(){
					mui.alert("加入购物车成功！！") 
				})
			});
		</script>
		<script>
			$.getJSON("../json/changpinxiangqing.json",function(data){
				var strHtml = "";//存储数据的变量
//				$jsontip.empty();//清空内容\
				$.each(data[0].scroll,function(infoIndex,info){
					strHtml +='<div id="scroll_xiaji" class="mui-slider-item">';
					strHtml +='<a href="#">';
					strHtml +='<img src=' + info.g_src + '>';
					strHtml +='</a></div>';
				})
				$("#slider_xia").append(strHtml);
				var befores="";
				$.each(data[0].scroll[0],function(infoIndex,info){
					befores +='<div class="mui-slider-item mui-slider-item-duplicate">';
					befores +='<a href="#">';	
					befores +='<img src=' + info + '>';
					befores +='</a></div>';
				})
                $("#slider_xia").append(befores);//轮播图
				var afters="";
				$.each(data[0].scroll[0],function(infoIndex,info){
					afters +='<div class="mui-slider-item mui-slider-item-duplicate">';
					afters +='<a href="#">';
					afters +='<img src=' + info + '>';
					afters +='</a></div>';
				})
				$("#scroll_xiaji").before(befores);
			});
			mui.plusReady(function(){
				var self = plus.webview.currentWebview();
    			var id=self.urlid;
                $.ajax({
                    url:'http://www.reliants.cn/mobile/zixun/product_list',
                    type:'post',
					data:{id:id},
                    async:true,
                    dataType:'json',
                    success:function(data){
						var xiangqing="";
						$.each(data,function(infoIndex,info){
							xiangqing +='<label style="padding-right: 0; border-bottom: none; width: 100%; padding-right: 12px;">';
							xiangqing +='<div style="width: 100%" class="label_one">';
							xiangqing +='<div style="width: 100%;" class="label_one_contain">';
							xiangqing +='<p style="padding-right: 12px;">' + info.list_p + '</p>';
							xiangqing +='<span class="youhui">登陆即享优惠</span>';
							xiangqing +='<div style="100%;" class="label_one_contain_bottom">';
							xiangqing +='<a class="a4">平台价：<span class="jiaqian">￥' + info.list_bottom_a4_span + '</span></a>';
							xiangqing +='<a class="a3">已售出：<span class="jiaqian">' + info.list_bottom_a3_span + '</span></a>';
							xiangqing +='</div></div></div></label>';
							$('#num').html("￥0");
                            $(".mui-numbox-btn-plus,.mui-numbox-btn-minus").click(function(){
                                var shuliang = $('input[type=number]').val();
                                $('#num').text('￥'+shuliang*info.list_bottom_a4_span)
                            });
                            $(".mui-numbox-btn-minus").click(function(){
                                var shuliang = $('input[type=number]').val();
                                $('#num').text('￥'+shuliang*info.list_bottom_a4_span);
                                if(shuliang === '0'){
                                    alert(shuliang)
                                    $('#num').html("￥0");
								}
                            })
						})
						$("#boxs").html(xiangqing);
                    },
                    error:function(error){
                        alert(error.responseText)
                    },
                });
			})
			
		</script>
	</body>

</html>
